<template>
	<div>
		<div class="main" ref="el" :style="style" style="position: fixed">
			<span>点击这里拖动</span>
			<span class="return" @click="handleReturn">返回</span>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useDraggable } from "@vueuse/core";
const el = ref<HTMLElement | null>(null);
const { x, y, style } = useDraggable(el, {
	initialValue: { x: window.innerWidth - 200, y: window.innerHeight - 110 },
});
const router = useRouter();

const handleReturn = () => {
	router.push("/");
};
</script>

<style scoped lang="scss">
.main {
	width: 150px;
	bottom: 50px;
	right: 50px;
	color: #000;
	height: 70px;
	background: #050c17;
	border: 1px solid #4cfefe;
	color: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 200;
	user-select: none;
	padding-right: 10px;
	flex-direction: column;
	padding: 15px;
	box-sizing: border-box;

	span:first-of-type {
		cursor: move;
		padding-top: 10px;
	}
	.return {
		padding: 10px;
		padding-top: 5px;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
	.return:hover {
		background-color: #349cf4;
	}
}
</style>
